<template>
	<view class="count-container">
		<view class="left">
			<image class="subtract" :src="sheep.$url.static('/assets/img/modal-market-subtract.png')" 
			mode="aspectFill"
			@click="subtract"
			>
		
			</image>
			<view class="number font-DIN">
				{{count}}
			</view>
			<image class="plus" :src="sheep.$url.static('/assets/img/modal-market-plus.png')" 
			@click="plus"
			mode="aspectFill">
					
			</image>
		</view>
		<view class="max font-AlimamaDongFangDaKaiRegular" @click="max">
			最大
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import sheep from '@/sheep';
	const props = defineProps({
		maxCount: {
			type: Number,
			default: 10
		} 
	})
	const count = ref(1)
	const subtract = () =>{
		if(count.value === 0) return
		count.value--
	}
	const plus = () =>{
		if(count.value === props.maxCount) return
		count.value++
	}
	const max = () =>{
		count.value = props.maxCount
	}
</script>

<style lang="scss" scoped>
	.count-container{
		width: 650rpx;
		height: 100rpx;
		border-radius: 18rpx;
		background: #F8F5EB;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 0 18rpx;
		.left{
			width: 502rpx;
			height: 100rpx;
			flex-shrink: 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			.subtract{
				width: 90rpx;
				height: 76rpx;
				flex-shrink: 0;
				flex-grow: 0;
			}
			.number{
				flex: 1;
				text-align: center;
				color: #017482;
				text-align: center;
				font-size: 40rpx;
				font-style: normal;
				font-weight: 700
			}
			.plus{
				width: 90rpx;
				height: 76rpx;
				flex-shrink: 0;
				flex-grow: 0;
			}
		}
		.max{
			width: 90rpx;
			height: 76rpx;
			flex-shrink: 0;
			border-radius: 12rpx;
			background: #FFF;
			color: #017482;
			text-align: center;
			font-size: 28rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 76rpx;
		}
	}   
</style>
